<!-- 我的公卫券界面 -->
<template>
	<view class="index">
		<view class="select-btn">
			<button v-for="(item, index) in typeList" :style="index> 0 ? 'margin-left: 8px' : ''"
				:class="activateBtn === item.value ? 'avtivate-btn' : 'default-btn'" type="default" size="mini"
				@click="clickBtn(item)">
				{{item.label}}
			</button>
		</view>
		<view style="padding: 0 16px 16px;">
			<scroll-view scroll-y="true" :scroll-top="0" @scrolltolower="loadPageResidentCoupon" class="content">
					<view class="content-item" v-for="(item1, index2) in couponList" :key="index2"
						:class="index2 > 0? 'mt-2' : ''">
						<image :src='item1.cover'></image>
						<view class="item-content">
							<text class="title">{{item1.name}}</text>
							<view class="amount">
								￥<text style="font-size: 28px;">{{item1.denomination}}</text>
							</view>
							<text class="validity">有效期：{{formatDate(item1.expirationTime)}}</text>
						</view>
						<button class="item-btn" size="mini" type="default">立即使用</button>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import { pageResidentCoupon } from '@/sheep/api/mine.js'
	import { onMounted, ref } from 'vue'
	import dayjs from 'dayjs'

	// 分页数据
	const page = ref({
		pageNo: 1,
		pageSize: 10,
		total: 0,
	})
	// 类型列表
	const typeList = ref([
		{
			label: '未使用',
			value: 'RECEIVED'
		},
		{
			label: '已使用',
			value: 'VERIFIED'
		},
		{
			label: '已过期',
			value: 'EXPIRED'
		},
		{
			label: '已失效',
			value: 'DESTROYED'
		}
	])

	// 日期格式化
	const formatDate = (val) => {
		return dayjs(val).format('YYYY/MM/DD')
	}
	// 激活的按钮
	const activateBtn = ref('RECEIVED')
	// 点击顶部按钮触发
	const clickBtn = (val) => {
		activateBtn.value = val.value
		reset()
		loadPageResidentCoupon()
	}

	// 数据重置
	const reset = () => {
		finished.value = false
		couponList.value = []
		page.value.total = 0
		page.value.pageNo = 1
	}

	// 公卫券列表
	const couponList = ref([])
	
	// 列表是否加载完
	const finished = ref(false)

	// 加载公卫券列表
	const loadPageResidentCoupon = async () => {
		if(finished.value) {
			return
		}
		try {
			const params = {
				pageNo: page.value.pageNo,
				pageSize: page.value.pageSize,
				residentIdNumber: '779977995622394561',
				couponStatus: activateBtn.value
			}
			const res = await pageResidentCoupon(params)
			couponList.value = couponList.value.concat(res.data.list)
			if(couponList.value.length >= res.data.total) {
				finished.value = true
			}
			page.value.pageNo++
			page.value.total = res.data.total
		} catch (e) {
			console.log(e)
		}
	}

	onMounted(loadPageResidentCoupon)
</script>

<style scoped lang="scss">
	.index {
		background-color: #F9F9F9;
		height: 100%;

		.select-btn {
			padding: 12px;
		}

		.content {
			height: calc(100vh - 70px);
			overflow: auto;

			.content-item {
				background: #fff;
				border-radius: 8px;
				display: flex;
				position: relative;

				image {
					border-radius: 8px 0 0 8px;
					height: 100px;
					width: 112px;
				}

				.item-content {
					padding: 8px;

					.title {
						font-size: 16px;
						color: #333333;
						font-weight: bold;
					}

					.amount {
						display: flex;
						align-items: center;
						line-height: 40px;
						color: #FD5856;
						font-weight: 500;
					}

					.validity {
						font-size: 13px;
						color: #666666;
						font-weight: 400;
					}
				}

				.item-btn {
					position: absolute;
					padding: 0 12px;
					line-height: 26px;
					background-color: #04B285;
					border-radius: 32px;
					color: #fff;
					bottom: 12px;
					right: 12px;
				}
			}
		}
	}

	.avtivate-btn {
		background-color: #7FDCAD;
		color: #fff;
		line-height: 26px;
	}

	.default-btn {
		background-color: #fff;
		border: 1px solid rgba(127, 220, 173, 0.6);
		color: #7FDCAD;
		line-height: 24px;
	}

	uni-button:after {
		height: 100%;
		width: 100%;
		border: none;
	}
</style>